

  <template>


<div v-loading="loading" class="baseinfo" style="padding-top:30px;float: left;padding-left:30px" >
      <!-- <el-row  type="flex" justify="space-around" class="myrow">
        <el-col>
          <h2 style="line-height:30px;color:#666;margin-bottom:3rem"><span style="color:#ff770f">{{userName}}</span> 您好，欢迎使用一步充电智能科技用户管理系统</h2>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around" style="width:70%;">
        <el-col :span="6" class="mycol">
          <div style="background: rgb(69, 21, 66);color: rgb(255, 255, 255);display: inline-block;width:95%;padding-top: 10%;padding-bottom: 10%;border-radius: 10px;margin-bottom:5%;text-align: center;">
          <h3>累计收益</h3>
          <h2>{{userIncome == null ? 0 : userIncome}} <span style="font-size:18px">元</span></h2>
        </div>
        </el-col>
  
        <el-col :span="6" class="mycol">
          <div style="background: #ff770f;color: rgb(255, 255, 255);display: inline-block;width: 95%;padding-top: 10%;padding-bottom: 10%;border-radius: 10px;margin-bottom:5%;text-align: center;">
          <h3>累计电量</h3>
          <h2>{{elecTotleCounter == null ? 0 : elecTotleCounter}} <span style="font-size:18px">度</span></h2>
        </div>
        </el-col>
        <el-col :span="6" class="mycol">
          <div style="background:#46d0e3;color: rgb(255, 255, 255);display: inline-block;width: 95%;padding-top: 10%;padding-bottom: 10%;border-radius: 10px;margin-bottom:5%;text-align: center;">
          <h3>使用次数</h3>
          <h2>{{useageCounter == null ? 0 : useageCounter}} <span style="font-size:18px">次</span></h2>
        </div>
        </el-col>
        <el-col :span="6" class="mycol">
          <div style="background:#59d76e;color: rgb(255, 255, 255);display: inline-block;width: 95%;padding-top: 10%;padding-bottom: 10%;border-radius: 10px;margin-bottom:5%;text-align: center;">
          <h3>泊位数量</h3>
          <h2>{{lockNumber == null ? 0 : lockNumber}} <span style="font-size:18px">个</span></h2>
        </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around" style="width:70%">
        
        <el-col :span="6" class="mycol">
          <div style="background:#eeb515;color: rgb(255, 255, 255);display: inline-block;width: 95%;padding-top: 10%;padding-bottom: 10%;border-radius: 10px;text-align: center;">
          <h3>占用</h3>
          <h2>{{useCounter == null ? 0 : useCounter}} <span style="font-size:18px">个</span></h2>
        </div>
        </el-col>
        <el-col :span="6" class="mycol">
          <div style="background:#10adf8;color: rgb(255, 255, 255);display: inline-block;width: 95%;padding-top: 10%;padding-bottom: 10%;border-radius: 10px;text-align: center;">
          <h3>空闲</h3>
          <h2>{{freeCounter == null ? 0 : freeCounter}} <span style="font-size:18px">个</span></h2>
        </div>
        </el-col>
        <el-col :span="6" class="mycol">
          <div style="background:#aa6cdf;color: rgb(255, 255, 255);display: inline-block;width: 95%;padding-top: 10%;padding-bottom: 10%;border-radius: 10px;text-align: center;">
          <h3>预约</h3>
          <h2>{{bookCounter == null ? 0 : bookCounter}} <span style="font-size:18px">个</span></h2>
        </div>
        </el-col>
        <el-col :span="6" class="mycol">
          <div style="background:#f04145;color: rgb(255, 255, 255);display: inline-block;width: 95%;padding-top: 10%;padding-bottom: 10%;border-radius: 10px;text-align: center;">
          <h3>故障</h3>
          <h2>{{ gzCounter == null ? 0 : gzCounter}} <span style="font-size:18px">个</span></h2>
        </div>
        </el-col>

      </el-row>


<div style="width: 29%;
    position: absolute;
    padding: 20px;
    border: 1px solid rgb(213, 213, 213);
    box-shadow: rgb(213 213 213) 5px 5px 5px;
    top: 135px;
    right: 10px;
    height:24rem;
    text-align:center;
    font-weight: 600;
    color: #ffffff;
    background: #3882cfbf;
    border-radius: 15px;">
  <span>最近上线场站</span>
      <el-table
      :header-cell-style="{ color:'#ffffff',background:'#3882cfbf' }"
      :key="tableKey"
      :row-class-name="warning-row"
      v-loading="listLoading"
      :data="list"
      height="310"
      highlight-current-row
      style="width: 100%;font-size: 15px;border: 0px;margin-top: 10px;border:1px solid #ffffff;background: #ffffff;"
      @sort-change="sortChange"     
    >

      <el-table-column label="场站地址" prop="parkfieldName" align="center" min-width="120px">
        <template slot-scope="{row}">
          <span>{{ row.lockAddress }}</span>
        </template>
      </el-table-column>

      <el-table-column label="编号" prop="id" align="center" min-width="80px">
        <template slot-scope="{row}">
          <span>{{ row.lockMac }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="上线时间" min-width="80px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createDate.substring(0,11) }}</span>
        </template>
      </el-table-column>
    
    </el-table>
    
  </div> -->



  
  <div type="flex" justify="space-around" style="width: 60%;">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner" style="border-left: 3px solid #59e2e7;">
            <el-col :span="8">
            <img src="@/assets/icon01.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>累计收益</span><br/>
          <span class="amount">{{userIncome == null ? 0 : userIncome}} <span style="font-size:18px">元</span></span>
        </el-col>
        </div>
        </el-col>
  

        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner"  style="border-left: 3px solid #aa6cdf;">
            <el-col :span="8">
            <img src="@/assets/icon07.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>累计电量</span><br/>
          <span  class="amount">{{elecTotleCounter == null ? 0 : elecTotleCounter}} <span style="font-size:18px">度</span></span>
        </el-col>
        </div>
        </el-col>
      </div>

        <div type="flex" justify="space-around" style="width: 60%;">

          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner"  style="border-left: 3px solid #cccccc;">
            <el-col :span="8">
            <img src="@/assets/icon02.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>使用次数</span><br/>
          <span  class="amount">{{useageCounter == null ? 0 : useageCounter}} <span style="font-size:18px">次</span></span>
        </el-col>
        </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner"  style="border-left: 3px solid #ff770f;">
            <el-col :span="8">
            <img src="@/assets/icon06.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>泊位数量</span><br/>
          <span  class="amount">{{lockNumber == null ? 0 : lockNumber}} <span style="font-size:18px">个</span></span>
        </el-col>
        </div>
        </el-col>
      <!-- </el-row>
      <el-row   type="flex" justify="space-around" style=""> -->
      </div>
        <div type="flex" justify="space-around" style="width: 60%;">
        
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner" style="border-left: 3px solid #eeb515;">
            <el-col :span="8">
            <img src="@/assets/icon04.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>占用</span><br/>
          <span  class="amount">{{useCounter == null ? 0 : useCounter}} <span style="font-size:18px">个</span></span>
        </el-col>
        </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner" style="border-left: 3px solid #4cc846;">
            <el-col :span="8">
            <img src="@/assets/icon05.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>空闲</span><br/>
          <span  class="amount">{{freeCounter == null ? 0 : freeCounter}} <span style="font-size:18px">个</span></span>
        </el-col>
        </div>
        </el-col>

      </div>
        <div type="flex" justify="space-around" style="width: 60%;">
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner" style="border-left: 3px solid #10adf8;">
            <el-col :span="8">
            <img src="@/assets/icon08.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>预约</span><br/>
          <span  class="amount">{{ bookCounter == null ? 0 : bookCounter}} <span style="font-size:18px">个</span></span>
        </el-col>
        </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mycol">
          <div class="partner" style="border-left: 3px solid #d31309;">
            <el-col :span="8">
            <img src="@/assets/icon03.png" class="sidebar-logo">
          </el-col>
          <el-col :span="16">
          <span>故障</span><br/>
          <span  class="amount">{{ gzCounter == null ? 0 : gzCounter}} <span style="font-size:18px">个</span></span>
        </el-col>
        </div>
        </el-col>

      </div>



      <div style="
    width: 38%;
    padding: 20px;
    right: 28px;
    height: 550px;
    text-align: center;
    color: rgb(255, 255, 255);
    box-shadow: 0px 1px 8px #c7c4c4;
    background: rgb(255, 255, 255);
    border-radius: 10px;
    position: absolute;">
  <span style="color: rgb(43 43 44);
    text-align: left;
    width: 96%;
    display: inline-block;
    background: #f6f6f6;
    font-size: 32rpx;
    font-size: 18px;
    padding: 2%;">最近上线场站</span>
      <el-table
      :header-cell-style="{ color:'#606266',background:'#ffffff' }"
      :key="tableKey"
      :row-class-name="warning-row"
      v-loading="listLoading"
      :data="list"
      height="460"
      highlight-current-row
      style="width: 100%;font-size: 15px;border: 0px;margin-top: 10px;border:1px solid #ffffff;background: #ffffff;"
      @sort-change="sortChange"     
    >

      <el-table-column label="场站地址" prop="parkfieldName" align="left" min-width="120px">
        <template slot-scope="{row}">
          <span>{{ row.lockAddress }}</span>
        </template>
      </el-table-column>

      <el-table-column label="编号" prop="id" align="left" min-width="80px">
        <template slot-scope="{row}">
          <span>{{ row.lockMac }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="上线时间" min-width="80px" align="left">
        <template slot-scope="{row}">
          <span>{{ row.createDate.substring(0,11) }}</span>
        </template>
      </el-table-column>
    
    </el-table>
    
  </div>

    </div>


  </template>
  
  <script>
  import { getUserInfoApi,lclockApi } from "@/api/runinfo";
  import { getNickName,getRoleCode} from "@/utils/auth";
  import { getManagerApi } from "@/api/user";
  
  export default {

    data() {
      return {
        onlineParkLockNum: 12,
        runTime: 4123123,
        amount: 888,
        pageNo:1,
        pageSize:20,
        total:'',
        roleCode:'',
        loading: true,
        listLoading:true,
        roleCode:'',
        userName: "",
        list2:'',
        list:[],
        lockNumber: 0, 
        useageCounter: 0, 
        userIncome: 0, 
        freeCounter: 0,
        useCounter: 0, 
        elecTotleCounter: 0
      }
    },

    created() {   
   
      
       
       
    },
    mounted(){

      
        var _this = this;
     
      var key = localStorage.getItem("key");
      if(key == '' || key == undefined || key == null){
      this.roleCode = getRoleCode()
      localStorage.setItem("key",this.roleCode)
     
      }else{
        this.roleCode = key
      }
      
     var userName = localStorage.getItem("title");
      if(userName == '' || userName == undefined || userName == null){
        this.userName = getNickName();
        localStorage.setItem("title",this.userName)
      }else{
        this.userName = localStorage.getItem("title");
      }

      _this.getUserInfo();
      lclockApi({pageNo:this.pageNo,
        pageSize:this.pageSize,
        roleCode:this.roleCode
      }).then(resp => {
        this.list = resp.data.dataList
      })

      setTimeout(() => {
            _this.listLoading = false;
            _this.loading = false;
            }, 1 * 2000);

       
    },
    methods: { 
      getUserInfo() {
          getUserInfoApi({
            roleCode:this.roleCode
          }).then(resp => {
            if (resp.errmsg === "ok") {
              var info = resp.data;
              this.lockNumber = info.lockNumber;
              this.useageCounter = info.useageCounter;
              this.userIncome = info.user_income;
              this.freeCounter = info.freeCounter;
              this.useCounter = info.useCounter;
              this.elecTotleCounter = info.elecTotleCounter;
              this.bookCounter = info.bookCounter;
              this.gzCounter = info.gzCounter;
      
            } else {

            }
          })
          .catch(e => {

          });
      },
    }
   
  }
  </script>



<
  <style scoped>
      .partner{
        background: #ffffff;
        color: rgb(255, 255, 255);
        display: inline-block;
        width:90%;
        min-width:300px;
        padding-top:3%;
        padding-bottom:3%;
        border-radius: 10px;
        margin-bottom:3%;
        text-align: left;
        color: #333;
        padding-left:20px;
        line-height: 40px;
        box-shadow: 3px 1px 5px #d5d5d5;
      }
      .baseinfo {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .amount{
    font-weight: 600;
    font-size: 32px;
  }
      
  
  .myrow {
    width: 100%;
    margin: auto;
  }
  
  .myrow > div {
    text-align: center;
  }
  .mycol h1 {
    margin: 2vh 0;
    color: #ffffff;
    font-weight: bold;
  }
  
  h1 {
    font-size: 250%;
  }
  
  h2 {
    font-size: 200%;
  }
  .el-table .warning-row {
  background: #e9aa7e;
  }
  .el-table tr {
      background-color: #642626;
  }
  
  </style> 